<template>
    <div>

        <div class="el-carousel">

            <el-carousel height="520px" width="100%">
                <el-carousel-item>
                    <img src="../../../static/index/lunbo1.png" />
                </el-carousel-item>
                <el-carousel-item>
                    <img src="../../../static/index/lunbo2.png" />
                </el-carousel-item>
            </el-carousel>
        </div>
        <div class="summary">

            <ul class="summary-box">
                <li>
                    <img src="../../../static/index/summary/1.png" />
                    <h2>极简教学主义</h2>
                    <p>无安装，无插件，无需专门学习；掌握简单，三分钟上手；上传一个课件，即可开启精彩的课堂</p>
                </li>
                <li>
                    <img src="../../../static/index/summary/2.png" />
                    <h2>精彩的课堂教学</h2>
                    <p>提供更多课堂互动场景：课件讲解，手机遥控，标记疑问，评论，弹幕互动，同屏课件，语音直播...</p>
                </li>
                <li>
                    <img src="../../../static/index/summary/3.png" />
                    <h2>有趣的课堂互动</h2>
                    <p>抢答，点名和随机提问，多种表现奖励形式，记录混合教学过程，激发学生学习原动力，创造更精彩的课堂</p>
                </li>
                <li>
                    <img src="../../../static/index/summary/4.png" />
                    <h2>实时随堂试题互动</h2>
                    <p>上课讲解课件时，随时发起随堂试题互动：投票、评价、拍照、选择、简答等多种题型，实时作答，即时分析</p>
                </li>
                <li>
                    <img src="../../../static/index/summary/5.png" />
                    <h2>精准的考勤签到</h2>
                    <p>二维码，数字口令，GPS，传统考勤等多种考勤形式；杜绝代签，一键导出考勤记录</p>
                </li>
                <li>
                    <img src="../../../static/index/summary/6.png" />
                    <h2>作业神器</h2>
                    <p>81种文档格式作业在线展示和批阅，随时随地批改作业；实时查重，精准比对，避免学生抄袭；自动管理成绩，一键下载作业数据</p>
                </li>
                <li>
                    <img src="../../../static/index/summary/7.png" />
                    <h2>智能成绩管理</h2>
                    <p>汇总考勤、表现、作业、测试、平时成绩、期末成绩；自由调整成绩权重，汇总最终教学成绩，科学权威</p>
                </li>
                <li>
                    <img src="../../../static/index/summary/8.png" />
                    <h2>教学全过程数据分析</h2>
                    <p>教学全过程活动数据自动生成，实时查看课程和学生数据面板和报表，教学数据可留存，可追溯</p>
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
export default {

}
</script>
<style scoped>
.summary {
    width: 100%;
    /*height: 540px;*/
    position: relative;
    margin-left: auto;
    margin-right: auto;
    background-color: #fff;
}
.summary-box {
    position: absolute;
  top: -80px;
   left: 50%;
  transform: translateX(-50%);
    z-index: 2;
  width: 1200px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
.summary-box li:not(:nth-child(4n)) {
    margin-right: 30px;
}
.summary-box li {
    width: 222px;
    height: 260px;
    background-color: #fff;
    box-shadow: 0 0 20px 0 rgba(4,0,0,.1);
    border-radius: 4px;
    margin-top: 25px;
    display: flex;
  justify-content: space-between;
    flex-direction: column;
    align-items: center;
    padding: 0 20px;
    box-sizing: border-box;
}
.summary-box li img {
    margin-top: 25px;
    width: 72px;
    height: 72px;
}
.summary-box li h2 {
    color: #1F2023;
    font-size: 18px;
    margin-top: 16px;
}
.summary-box li p {
    color: #AAB5C2;
    margin-top: 16px;
    font-size: 13px;
    width: 100%;
    word-break: break-all;
}
</style>
